<script setup>
	import {
		ref
	} from "vue"
	import nuni from '../../static/utils/request.js'
	import useBP from '@/hooks/badgeProblem.js'
	useBP()
	// 处理系统信息相关
	const wh = ref(0)
	const getSysInfo = async () => {
		const res = await uni.getSystemInfo()
		wh.value = res.windowHeight - 50
		return res
	}
	getSysInfo()
	// 分类数据相关
	// ------一级分类处理
	const cateList = ref([])
	const cateList2 = ref([])
	const activeCateIdx = ref(0)
	const catesRight_scrollTop = ref(0) //右侧分类到顶部的距离
	const getCateList = async () => {
		const {
			data: res
		} = await nuni.request({
			url: '/api/public/v1/categories'
		})
		if (res.meta.status != 200) return nuni.$showMsg()
		cateList.value = res.message
		// 处理二级分类的值
		cateList2.value = cateList.value[activeCateIdx.value].children
	}
	getCateList()
	const dealChangeActive = nI => {
		activeCateIdx.value = nI
		// 处理二级分类的值（重新赋值）
		cateList2.value = cateList.value[activeCateIdx.value].children
		// 重置滚动条
		catesRight_scrollTop.value = Math.random()
	}
	// ----跳转业务相关
	const gotoGoodsList = o => {
		uni.navigateTo({
			url: `/subpkg/goods_list/goods_list?cid=${o.cat_id}`
		})
	}
	// 点击搜索事件相关业务
	const gotoSearch = e => {
		uni.navigateTo({
			url: '/subpkg/search/search'
		})
	}
</script>
<template>
	<my-search @click="gotoSearch"></my-search>
	<view class="scorll-cates">
		<scroll-view scroll-y="true" :style="{height: wh+'px'}" class="scorll-cates-left">
			<block v-for="(e, i) in cateList" :key="i">
				<view class="scorll-cates-left-item" :class="{active:i===activeCateIdx}" @click="dealChangeActive(i)">
					{{e.cat_name}}
				</view>
			</block>
		</scroll-view>
		<scroll-view scroll-y="true" class="scorll-cates-right" :style="{height: wh +'px'}"
			:scroll-top="catesRight_scrollTop">
			<view class="scorll-cates-right-item-main" v-for="(e2,i2) in cateList2" :key="i2">
				<!-- 二级分类：标题 -->
				<view class="scorll-cates-right-item-title">
					/{{e2.cat_name}}/
				</view>
				<view class="scorll-cates-right-item-list">
					<!-- 每个标题的子项 -->
					<view class="scorll-cates-right-item-sub" v-for="(e3, i3) in e2.children" @click="gotoGoodsList(e3)"
						:key="i3">
						<image :src="e3.cat_icon"></image>
						<text>{{e3.cat_name}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>


<style lang="scss">
	.scorll-cates {
		display: flex;

		.scorll-cates-left {
			width: 120px;

			.scorll-cates-left-item {
				position: relative;
				background-color: #f7f7f7;
				line-height: 60px;
				text-align: center;
				font-size: 12px;

				&.active {
					background-color: #fff;

					&::before {
						position: absolute;
						content: '';
						display: block;
						top: 50%;
						width: 3px;
						height: 30px;
						background-color: red;
						transform: translate(0, -50%);
					}
				}
			}
		}

		.scorll-cates-right {
			background-color: #fff;
		}

		.scorll-cates-right-item-title {
			font-size: 14px;
			font-weight: 700;
			text-align: center;
			padding: 15px 0;
		}

		.scorll-cates-right-item-list {
			display: flex;
			flex-wrap: wrap;

			.scorll-cates-right-item-sub {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 33.3%;
				margin-bottom: 10px;

				image {
					width: 60px;
					height: 60px;
				}

				text {
					font-size: 12px;
				}
			}
		}
	}
</style>